<template>
    <div class="flex container" >
        <div style="width: 460px;margin: 0 15px;display: flex; flex-direction: column;">
            
            <n-card class="left-card " style="flex: 1;" title="最近热门话题....." hoverable >
                <myTag style="margin-top: 10px; margin-right: 10px;" v-for="(item,index) in topicList" :key="index" @click="chooseTopic(item.id)"># {{item.topic_name}}</myTag>
            </n-card>
        </div>
        <div style="flex:1">
            <n-card
              :segmented="{
                content: true,
                footer: 'soft'
              }"
            >
              <template #header>
                <div class="">
                    <div class="flex">
                        <div style="position: relative; width: 400px; margin-right: 10px; border: 1px solid #f2f2f2;border-radius: 5px;display: flex;justify-content: center;align-items: center;">
                            <n-upload v-if="mainImg ==''" :action="`http://127.0.0.1:7001/admin/file`" @finish="handleFinish" class="flex" style="justify-content: center;" accept="image/png, image/jpeg">
                                <n-button dashed> 上传文章主图 </n-button>
                            </n-upload>
                            <img v-if="mainImg!=''" :src="mainImg" style="width: 100%;height: 100%;" alt="">
                            <n-upload :file-list-style="{'display':'none'}" v-if="mainImg!=''" style="position: absolute; bottom: 0;width: 100%;height: 35px;background-color: black;opacity: .6;text-align: center;color: aliceblue;line-height: 35px;cursor: pointer;justify-content: center;"  :action="`http://127.0.0.1:7001/admin/file`" @finish="handleFinish"  accept="image/png, image/jpeg">
                                <div style="width: 100%;">重新上传图片</div>
                            </n-upload>
                        </div>
                        <n-card class="left-card " hoverable style="display: flex;">
                            <template #header>选一个标签吧~</template>
                            <myTag style="margin-top: 10px; margin-right: 10px;" v-for="(item,index) in tagsList" :key="index" @click="chooseTags(item.id)">{{item.tag_name}}</myTag>
                        </n-card>
                    </div>
                    <div class="mt10">
                        <n-input v-model:value="title" placeholder="请输入文章标题" size="large"></n-input>
                    </div>
                </div>
              </template>
              
                <Editor v-model="content" :config="config"></Editor>
              <template #footer>
                <div style="width: 100%; display: flex;justify-content: end;">
                    <MyButton class="mr10" @click="create(0)">保存草稿</MyButton>
                    <MyButton @click="create(1)">发表！</MyButton>
                </div>
              </template>
            </n-card>
        </div>
    </div>
</template>

<script setup lang="ts">
import Editor from '@/components/edit.vue'
import requestList from '@/service/request';
import { ref,onMounted } from 'vue';
import type { UploadFileInfo } from 'naive-ui'
import {useUserInfoStore} from '@/store/main'
import { getItem } from '@/utils/local';

const userStore = useUserInfoStore()



const title = ref("");
const content = ref("");
//富文本配置项
let config = {
  theme: "default", //主题模式 还可以设置为dark
  height: 500,
};


//标签列表
const tagsList =ref<any[]>([])
const getTags = async () =>{
    const res = await requestList.tagListApi({all:true})
    if(res.code === 1){
        tagsList.value = res.data as any
    }
}
let TagIds:number[] = []
const chooseTags = (id:number)=>{
    if(TagIds.find((item:any)=>(item === id))){
        TagIds = TagIds.filter((item:any)=>(item!==id))
    }else{
        TagIds.push(id)
    }
}

let topicIds:number[]=[]
const chooseTopic = (id:number)=>{
    if(topicIds.find((item:any)=>(item === id))){
        topicIds = topicIds.filter((item:any)=>(item!==id))
    }else{
        topicIds.push(id)
    }
}



//话题列表
const topicList = ref<any[]>([])
const getTopic = async ()=>{
    const res = await requestList.topicListApi({all:true})
    if(res.code === 1){
        topicList.value = res.data as any
    }
}


// 上传
const mainImg = ref('')
const handleFinish = ({file,event}: {
      file: UploadFileInfo
      event?: ProgressEvent
    })=>{
        mainImg.value = `http://127.0.0.1:7001/public${JSON.parse((event?.target as XMLHttpRequest).response).data[0].url}`
    }

// 创建文章/保存草稿
const create = async(type:number)=>{
    if(type === 1){
        if(title.value === ''){
            window.$message.warning('请输入标题')
            return
        }
        if(content.value === ''){
            window.$message.warning('内容不能为空')
            return
        }
        if(mainImg.value === ''){
            window.$message.warning('请上传主图')
            return
        }
        if(topicIds.length === 0){
            window.$message.warning('选择至少一个话题')
            return
        }
        if(TagIds.length === 0){
            window.$message.warning('选择至少一个标签')
            return
        }
    }
    
    const postData = {
        title:title.value,
        authorId:getItem('curUserInfo').id,
        content:content.value,
        main_img:mainImg.value,
        status:type,
        topic:topicIds.join(','),
        tags:TagIds.join(',')
    }
    const res = await requestList.createArticleApi(postData)
    if(res.code === 1){
        const tips = type === 0?'已保存草稿！':'文章创建成功！'
        window.$message.success(tips)
    }
}

onMounted(()=>{
    getTags()
    getTopic()
})

</script>

<style lang="scss">
.left-card{
    border-radius: 5px;
    border-top:solid 6px $color3 !important;
}
</style>